<template>
  <div>
    <el-button type="primary" size="small" @click="open(null)">新增</el-button>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column fixed prop="menuID" label="编号" width="50" />
      <el-table-column prop="menuName" label="菜单名称" width="120" />

      <el-table-column prop="parentMenuName" label="父级菜单名称" width="120" />
      <el-table-column prop="createName" label="创建人" width="120" />
      <el-table-column prop="createTime" label="创建日期" width="120">
        <template #default="scope">
          {{
            scope.row.createTime ? scope.row.createTime.substring(0, 10) : " "
          }}
        </template>
      </el-table-column>
      <el-table-column prop="updateName" label="修改人" width="120" />
      <el-table-column prop="updateTime" label="修改日期" width="120">
        <template #default="scope">
          {{
            scope.row.updateTime ? scope.row.updateTime.substring(0, 10) : " "
          }}
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="Operations" min-width="150">
        <template #default="scope">
          <el-button type="warning" size="small" @click="open(scope.row)"
            >修改</el-button
          >
          <el-button
            type="danger"
            size="small"
            @click="delMenu(scope.row.menuID)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>

  <!-- 新增 -->
  <div>
    <el-dialog
      v-model="visit.dialogFormVisible"
      :title="visit.title"
      width="500"
    >
      <el-form :model="form">
        <el-form-item label="菜单名称:" :label-width="formLabelWidth">
          <el-input v-model="form.menuName" autocomplete="off" />
        </el-form-item>
        <el-form-item label="父级菜单编号:" :label-width="formLabelWidth">
          <el-input v-model="form.parentMenuId" autocomplete="off" />
        </el-form-item>
        <el-form-item label="父级菜单:" :label-width="formLabelWidth">
          <el-input v-model="form.parentMenuName" autocomplete="off" />
        </el-form-item>
        <el-form-item label="跳转路由:" :label-width="formLabelWidth">
          <el-input v-model="form.url" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="visit.dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="createMenu()"> 操作 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import axios, { Axios } from "axios";
import { ElMessage, ElMessageBox } from "element-plus";
import moment from "moment";
import { onMounted, reactive, ref, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useCounterStore } from "@/stores/counter";

const router = useRouter();
const store = useCounterStore();
const tableData = ref([]);
onMounted(() => {
  getMenus();
});

//显示
const getMenus = () => {
  axios
    .get("https://localhost:7174/api/Message/Handle/MenuQuery")
    .then((res) => {
      tableData.value = res.data.data;
    });
};

// const dialogTableVisible = ref(false)
// const dialogFormVisible = ref(false);
const formLabelWidth = "140px";

const visit = ref({
  dialogFormVisible: false,
  title: "",
  isAdd: true,
});
const form = reactive<any>({
  menuID: 0,
  menuName: "",
  parentMenuName: "",
  parentMenuId: 0,
  url: "",
  createName: store.ccstore.userName,
  createTime: new Date(),
  updateName: "",
  updataTime: new Date(),

  isDel: true,
});

// 添加菜单
const createMenu = () => {
  if (form.url == "") {
    ElMessage.error("请输入菜单地址");
    return;
  }
  if (form.menuName == "") {
    ElMessage.error("请输入菜单名称");
    return;
  }
  if (visit.value.isAdd) {
    axios
      .post("https://localhost:7272/api/Message/CreateMenu", form)
      .then((res) => {
        if (res.data.code == 100) {
          ElMessage.success(res.data.msg);
          visit.value.dialogFormVisible = false;
          getMenus();
          return;
        } else {
          ElMessage.error(res.data.msg);
          return;
        }
      });
  } else {
    axios
      .put("https://localhost:7272/api/Message/UpDataMenu", form)
      .then((res) => {
        
        if (res.data.code == 206) {
         
          ElMessage.success(res.data.msg);
          visit.value.dialogFormVisible = false;
          getMenus();
          return;
        } else {
          ElMessage.error(res.data.msg);
          return;
        }
      });
  }
};

// 打开菜单弹窗
const open = (row: any) => {
  if (row == null) {
    visit.value.dialogFormVisible = true;
    visit.value.title = "添加";
    visit.value.isAdd = true;
    (form.menuID = 0),
      (form.menuName = ""),
      (form.parentMenuName = ""),
      (form.parentMenuId = 0),
      (form.url = ""),
      (form.createName = store.ccstore.userName),
      (form.createTime = new Date()),
     
    
  
    form.isDel = true;
  } else {
    console.log(row)
    visit.value.dialogFormVisible = true;
    visit.value.title = "编辑";
    visit.value.isAdd = false;
    form.menuID = row.menuID;
    form.menuName = row.menuName;
    form.parentMenuName = row.parentMenuName;
    form.parentMenuId = row.parentMenuId;
    form.updataTime = new Date();
    form.updateName = store.ccstore.userName;
    form.url = row.url;
  }
};

//删除
const delMenu = (menuID: number) => {
  // getChildMenu(menuID);
  ElMessageBox.confirm("是否确定删除?", "Warning", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      axios
        .get("https://localhost:7174/api/Message/Handle/ChildMenus", {
          params: { MenuID: menuID },
        })
        .then((res) => {
          if (res.data.data == 1) {
            ElMessageBox.confirm("该菜单下有子菜单，是否删除?", "Warning", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            })
              .then(() => {
                axios
                  .put("https://localhost:7272/api/Message/DelMenu/DelMenu", {
                    menuID: menuID,
                  })
                  .then((res) => {
                    if (res.data.code == 204) {
                      ElMessage.success(res.data.msg);
                      return;
                    } else {
                      ElMessage.success(res.data.msg);
                      return;
                    }
                  });
              })
              .catch(() => {
                ElMessage({
                  type: "info",
                  message: "取消删除",
                });
              });
          } else {
            axios
              .put("https://localhost:7272/api/Message/DelMenu/DelMenu", {
                menuID: menuID,
              })
              .then((res) => {
                if (res.data.code == 204) {
                  ElMessage.success(res.data.msg);
                  return;
                } else {
                  ElMessage.success(res.data.msg);
                  return;
                }
              });
          }
        });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消删除",
      });
    });
};

//查询子级菜单
/* const getChildMenu = (menuID: number) => {
  axios
    .get("https://localhost:7174/api/Message/Handle/ChildMenus", {
      params: { MenuID: menuID },
    })
    .then((res) => {
      if (res.data.data == 1) {
        ElMessage.success("该菜单下有子菜单，是否删除");
        delMenu(menuID);
        return;
      } else {
        ElMessage.error(res.data.msg);
        return;
      }
    });
}; */
</script>

<style scoped>
</style>